<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Web-Monitor Options</title>
    <link rel="stylesheet" href="styles/component.css">
    <link rel="stylesheet" href="styles/element-ui.css">
    <script src="./scripts/libs/snap.svg.min.js"></script>
    <script src="./scripts/libs/classie.js"></script>
    <script src="./scripts/libs/svgLoader.js"></script>
  </head>
  <body>
    <div>
        <div id="loader" class="pageload-overlay" data-opening="M 40,-65 145,80 -65,80 40,-65" data-closing="m 40,-65 0,0 L -65,80 40,-65">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
                <path d="M 40,-65 145,80 40,-65"/>
            </svg>
        </div>
        <div id="root" style="visibility: hidden;">
            <h2>规则列表</h2>
            <el-table
                :data="configs"
                style="width: 100%"
                :stripe="true"
            >
                <el-table-column
                    prop="title"
                    label="标题"
                >
                </el-table-column>
                <el-table-column
                    prop="page"
                    label="page"
                >
                    <template slot-scope="scope">
                        <a target="_blank" :href="scope.row.page">{{scope.row.page}}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="url"
                    label="请求地址"
                >
                </el-table-column>
                <el-table-column
                    prop="sleep"
                    label="请求间隔"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="limit"
                    label="次数限制"
                    width="100"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <h2>规则配置</h2>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.desc" placeholder="请输入该配置描述"></el-input>
                </el-form-item>
                <el-form-item label="监控页面" prop="page">
                    <el-input v-model="form.page" placeholder="请输入需要监控的页面"></el-input>
                </el-form-item>
                <el-form-item label="请求地址" prop="url">
                    <el-input v-model="form.url" placeholder="请输入获取内容地址（不填则等于监控页面）"></el-input>
                </el-form-item>
                <el-form-item label="请求方式" prop="method">
                    <el-select v-model="form.method" placeholder="请选择">
                        <el-option
                            key="get"
                            label="GET"
                            value="GET">
                        </el-option>
                        <el-option
                            key="post"
                            label="POST"
                            value="POST">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.method === 'POST'" label="body" prop="body">
                    <el-input
                        type="textarea"
                        :rows="3"
                        v-model="form.body"
                        placeholder="请输入请求内容"
                    ></el-input>
                </el-form-item>
                <el-form-item label="返回类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option
                            key="text"
                            label="text"
                            value="json">
                        </el-option>
                        <el-option
                            key="json"
                            label="json"
                            value="json">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="解析规则" prop="parserCode">
                    <el-input placeholder="请输入解析规则" type="textarea" :rows="16" v-model="form.parserCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="testFetchContent">测试</el-button>
                    <el-button @click="emptyResults">清空查询结果</el-button>
                </el-form-item>
                <el-form-item>
                    <el-table
                        v-if="!isMocking && results.length > 0"
                        :data="results"
                        style="width: 100%"
                        max-height="250"
                        size="small"
                        :stripe="true"
                    >
                        <el-table-column
                            prop="key"
                            label="key"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="title"
                            label="标题"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="message"
                            label="内容"
                        >
                            <template slot-scope="scope">
                                <short-content :content="scope.row.message"></short-content>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="通知规则" prop="notifyCode">
                    <el-input
                        type="textarea"
                        :rows="16"
                        v-model="form.notifyCode"
                        placeholder="请输入生成通知规则"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="mockChildren">Mock 数据</el-button>
                </el-form-item>
                <el-form-item v-loading="loading">
                    <el-row v-if="isMocking" :gutter="20">
                        <el-col :span="12">
                            <span>旧内容</span>
                            <el-table
                                :data="results"
                                style="width: 100%"
                                max-height="250"
                                size="small"
                                :stripe="true"
                            >
                                <el-table-column
                                    prop="key"
                                    label="key"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="title"
                                    label="标题"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="message"
                                    label="内容"
                                >
                                    <template slot-scope="scope">
                                        <short-content :content="scope.row.message"></short-content>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="12">
                            <span>新内容</span><el-button type="text" @click="addChild">新增记录</el-button>
                            <el-table
                                :data="mockData"
                                style="width: 100%"
                                max-height="250"
                                size="small"
                                :stripe="true"
                            >
                                <el-table-column
                                    prop="key"
                                    label="key"
                                >
                                    <template slot-scope="scope">
                                        <el-input size="small" v-model="scope.row.key"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="title"
                                    label="标题"
                                >
                                    <template slot-scope="scope">
                                        <el-input size="small" v-model="scope.row.title"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="message"
                                    label="内容"
                                >
                                    <template slot-scope="scope">
                                        <el-input size="small" v-model="scope.row.message"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            type="danger"
                                            @click="removeMockRow(scope.$index, scope.row)"
                                        >删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="isMocking" type="primary" :loading="loading" @click="showCompareResult">对比结果</el-button>
                </el-form-item>
                <!-- <el-form-item label="webhook" prop="webhook">
                    <el-input v-model="form.webhook"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="!isMocking" :loading="loading" @click="testHook">测试hook</el-button><span v-if="!isMocking">需要先 mock 数据才能测试</span>
                </el-form-item> -->
                <el-form-item label="请求间隔" prop="sleep">
                    <el-input-number
                        v-model="form.sleep"
                        :min="5000"
                        placeholder="最小 5000"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="次数限制" prop="limit">
                    <el-input-number
                        v-model="form.limit"
                        :min="1"
                        placeholder="不填表示不限制"
                    ></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="saveConfig">保存配置</el-button>
                    <el-button :loading="loading" @click="output">输出</el-button>
                </el-form-item>
            </el-form>
            <h2>获取配置</h2>
            <div>
                <el-button type="primary" @click="fetchOriginConfigs">获取配置列表</el-button>
                <el-row :gutter="12">
                    <el-col :span="8" v-for="config in originConfigs">
                        <el-card class="box-card" shadow="hover">
                            <div slot="header" class="clearfix">
                                <span>{{config.title}}</span>
                                <el-button style="float: right; padding: 3px 0" type="text" @click="addOriginConfig(config)">添加</el-button>
                            </div>
                            <div>
                                <p>{{config.desc}}</p>
                                <p>{{config.page}}</p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <el-dialog
                title="对比结果"
                width="60%"
                :visible.sync="visible"
            >
                <h3>通知内容</h3>
                <pre>{{infos}}</pre>
                <h3>原始变更数据</h3>
                <pre>{{updates}}</pre>
                <span slot="footer" class="dialog-footer">
                    <el-button :loading="fetchOriginConfigsLoading" @click="visible = false">取消</el-button>
                    <el-button :loading="fetchOriginConfigsLoading" type="primary" @click="notify">发送通知</el-button>
                </span>
            </el-dialog>
            <el-dialog
                title="配置内容"
                width="60%"
                :visible.sync="outputVisible"
            >
                {{outputContent}}
            </el-dialog>
        </div>
    </div>
    <script src="./options-entry.js"></script>
  </body>
</html>
